<template>
  <!-- 首页 -->
  <div class="home">
    <!-- 页面头部 -->
    <menu-path :title="path"></menu-path>
    <div class="content">
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image.image_src" class="Img" @click="handelImg(image.goods_id)"/>
        </van-swipe-item>
      </van-swipe>
      <!-- 商品模块区 -->
      <van-row type="flex" justify="space-around" class="module">
        <van-col span="4" v-for="(module, index) in modules" :key="index" @click="classify(index)">
          <img v-lazy="module.image_src" class="moduleImg" />
        </van-col>
      </van-row>
      <!-- 商品展示区 -->
      <div v-for="(item,index) in shows" :key="index">
        <van-row gutter="10">
          <van-col span="24">
            <img :src="item.floor_title.image_src" alt class="img" />
          </van-col>
        </van-row>
        <div class="goodImg">
          <van-row gutter="10">
            <van-col :span="8">
              <img :src="item.product_list[0].image_src" @click="handelName(item.product_list[0].navigator_url)" />
            </van-col>
            <van-col :span="8">
              <van-row gutter="10">
                <van-col :span="24">
                  <img :src="item.product_list[1].image_src" @click="handelName(item.product_list[1].navigator_url)" alt />
                </van-col>
                <van-col :span="24">
                  <img :src="item.product_list[3].image_src" @click="handelName(item.product_list[3].navigator_url)" alt />
                </van-col>
              </van-row>
            </van-col>
            <van-col :span="8">
              <van-row gutter="10">
                <van-col :span="24">
                  <img :src="item.product_list[2].image_src" @click="handelName(item.product_list[2].navigator_url)" alt />
                </van-col>
                <van-col :span="24">
                  <img :src="item.product_list[4].image_src" @click="handelName(item.product_list[4].navigator_url)" alt />
                </van-col>
              </van-row>
             </van-col>
           </van-row>
          </div>
        </div>
      </div> 
 
    <!-- 应用导航区引入子组件 -->
    <menu-nav></menu-nav>   
    <!-- 返回顶部按钮 -->
    <div class="topBox" v-if="btnFlag" @click="backTop">
      <van-icon name="arrow-up" color="black" />
    </div>   
  </div>
</template>
<script>
import Vue from 'vue'
import { ImagePreview } from 'vant'
Vue.use(ImagePreview)
import Navgation from '../util/navigation.vue'
import Header from '../util/header.vue'
export default {
  data() {
    return {
      images: [],
      modules: [],
      shows: [],
      active: 0,
      path: '',
      btnFlag:false
    }
  },
  created() {
    this.getSwiperData()
    this.getModuleData()
    this.getShowData()
  },
  components: {
    'menu-nav': Navgation,
    'menu-path': Header
  }, 
// window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
mounted () {
  window.addEventListener('scroll', this.scrollToTop)
},
destroyed () {
  window.removeEventListener('scroll', this.scrollToTop)
},

  methods: {
    //获取轮播图数据
    async getSwiperData() {
      const data = await this.$axios.get('/home/swiperdata')
      if (data.meta.status !== 200) {
        this.$toast.fail('数据请求失败')
      }
      console.log(data);
      
      this.images = data.message
      this.path = this.$route.path
    },
    //获取模块数据
    async getModuleData() {
      const data = await this.$axios.get('/home/catitems')
      if (data.meta.status !== 200) {
        this.$toast.fail('数据请求失败')
      }
      this.modules = data.message
    },
    //获取商品展示数据
    async getShowData() {
      const data = await this.$axios.get('/home/floordata')
      this.shows = data.message
     
      
    },

    //点击分类跳转到分类页面
    classify(i) {
      if (i === 0) {
        this.$router.push('/class')
      }
    },
    //点击楼层数据跳转到列表数据
    handelName(url){ 
      const name=url.split('=')[1]
      this.$router.push({name:'/gooddate',params:{name:name}})
    },
    //点击轮播图跳转商品详情页面
    handelImg(id){    
        this.$router.push('/goodlist/'+id) 
    },
    
  // 点击图片回到顶部方法，加计时器是为了过渡顺滑
     backTop() {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
  // 为了计算距离顶部的高度，当高度大于20显示回顶部图标，小于20则隐藏
    scrollToTop () {
    const that = this
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    that.scrollTop = scrollTop
    if (that.scrollTop >100) {
      that.btnFlag = true
    } else {
      that.btnFlag = false
    }
  }

  }
}
</script>

<style lang="less" scoped>
.home {
  overflow-x: hidden;
  overflow-y: hidden !important;
}

.Img {
  width: 100%;
  height: 200px;
  vertical-align: middle;
}
.moduleImg {
  width: 100%;
}
.module {
  margin: 0.4rem 0 !important;
}
.img {
  width: 80%;
  vertical-align: middle;
}
.goodImg {
  padding: 0 0.1rem;
}
.goodImg img {
  width: 100%;
}
.content {
  margin-top: 1.22rem;
  margin-bottom: 1.22rem;
}
.topBox {
  position: fixed;
  right: 0.1rem;
  bottom: 3rem;
  z-index: 999;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid #999;
  border-radius: 50%;
  text-align: center;
  line-height: 0.7rem;
  background-color: rgba(255,255,255,.6);
}
</style>
